<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<link type="text/css" href="css/joinok.css" rel="stylesheet" />
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- Modal -->
<div class="modal fade" id="joinokModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" id="modal-dialog1">  
    <div class="modal-content">
    <form name="joinFs" method="post" id="joinFs" >
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h2 class="modal-title" id="loginModalLabel">회원가입</h2>
      </div>
			<div class="modal-body" id="modal-bodyid">
				
					<div>
						<label for="juid" class="blind">아이디</label>
						<input type="text" name="juid" id="juid" title="아이디" placeholder="아이디" onblur="checkuid()" />
						<span id="idchkresult"></span> 					
					</div>
					<label for="jpwd" class="blind">비밀번호</label> 
					<input type="password" name="jpwd" id="jpwd" title="비밀번호" placeholder="비밀번호"  />
					<label for="pwdchk" class="blind">비밀번호확인</label>
					<input type="password" name="rpwd" id="rpwd" title="비밀번호확인" placeholder="비밀번호 확인" onkeyup="checkPwd()" />
					<span id="pwdresult"></span> 
					<label for="namet" class="blind">이름</label> 
					<input type="text" name="namet" id="namet" title="이름" placeholder="이름" /> 
						<div id="genre">				
						<select name="genre1" id="genre1" title="장르">
							<option selected="selected">좋아하는 장르1 </option>
							<option>액션</option>
							<option>코미디</option>
							<option>애로</option>
							<option>로맨스</option>
							<option>공포/스릴러</option>
							<option>전쟁</option>
							<option>SF</option>
						</select><br /><br />
						<select name="genre2" id="genre2" title="장르">
							<option selected="selected">좋아하는 장르2 </option>
							<option>액션</option>
							<option>코미디</option>
							<option>애로</option>
							<option>로맨스</option>
							<option>공포/스릴러</option>
							<option>전쟁</option>
							<option>SF</option>
						</select><br /><br />
						</div>	
		        	<div>
						<input type="text" name="zip1" id="zip1" class="form-control" required="required" disabled="disabled" />
						<input type="text" name="zip2" id="zip2" class="form-control" required="required" disabled="disabled" />
						<button type="button" id="findzipcode" class="btn btn-info" data-toggle="modal" data-target="#zipcodeModal">우편번호 찾기</button>
						<input type="text" name="addr1" id="addr1" class="form-control" disabled="disabled" />
						<label for="addr2" class="blind">나머지주소</label>
						<input type="text" name="addr2" id="addr2" class="form-control" placeholder="나머지 주소"  title="나머지주소" />
					</div>	
					<label for="hpt" class="blind">휴대폰 번호</label>	
					<input type="text" name="hpt" id="hpt" title="휴대폰" placeholder="휴대폰" />	
					<label for="emt" class="blind">이메일</label>	
					<input type="text" name="emt" id="emt" title="이메일" placeholder="이메일" />	
				
			</div>
			<span id="joinokresult"></span> 
			
			<div class="modal-footer">
				<button type="button" class="btn btn-default"  onclick="joinok()" >가입완료</button>
				<button type="button" class="btn btn-default" data-dismiss="modal" >가입취소</button>
			</div>
		</form>	
		</div><!-- /.modal-content -->
  	</div><!-- /.modal-dialog -->  	
</div><!-- /.modal -->
<!-- Modal -->


<div id="showmodal" style="width: 420px; height: 330px; padding: 10px;
   background: #d0d0d0; border: 1px solid #ccc; position: relative; display: none;">
   <div><h1>지번주소 기반 우편번호 검색</h1></div>
   <div>검색할 주소의 동이름을 입력하세요</div>
   <div><button type="button" onclick="hideshowPop()">선택하고 닫기</button></div>

</div>

<div class="modal fade" id="zipcodeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="zipcodeModalLabel">우편번호 찾기</h4>
      </div>
      <div class="modal-body">
			<div>
				<label for="uid" class="blind">동이름 검색</label>
				<input type="text" name="dong" id="dong" class="form-control" title="검색할 주소의 동이름을 입력하세요" placeholder="검색할 주소의 동이름을 입력하세요" />
				<button type="button" class="btn btn-danger" id="findbtn">검 색</button>
			</div>
			<div>
				<select id="ziplist" class="form-control" size="10">
				</select>
			</div>					
      </div>
	  <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="okbtn" data-dismiss="modal">확 인</button>        
        <button type="button" class="btn btn-default" id="closebtn" data-dismiss="modal">닫 기</button>        
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="../js/jquery1.10.2.min.js"></script>
<script >
/* joinok 회원가입 버튼 클릭시 실패여부 문구 출력*/
 function joinok(){
	    var reqAjax = $.ajax({
	       url: "joinokhelper.bi",
	       type: "get",
	       data: {juid: $("#juid").val() , jpwd: $("#jpwd").val(),
	    	  	  namet: encodeURIComponent($("#namet").val()) , hpt: $("#hpt").val(), 
	    	  	  emt: $("#emt").val(),   addr1: encodeURIComponent($("#addr1").val()), 
	    	  	  addr2: encodeURIComponent($("#addr2").val()), ugenre1: encodeURIComponent($("#genre1").val()), 	
	    	  	  ugenre2: encodeURIComponent($("#genre2").val())
	     		  }
	  	   });
	    reqAjax.done(function (result) {
	       if (confirm('가입이 완료 되었습니다.')){
	    	   window.location.reload(true);
	       } else {
	    	   window.location.reload();
	       }
	    });
	    reqAjax.fail(function (jqXHR, status) {
	       alert("정보를 전부 입력해주세요!" + status);
	    });
	 }
</script >
<script >
/*아이디 체크 */
function checkuid(){
    var reqAjax = $.ajax({
       url: "idcheck.bi",
       type: "GET",
       data: {juid: $("#juid").val()}
    });
    reqAjax.done(function (result) {
       $("#idchkresult").html(result);
    });
    reqAjax.fail(function (jqXHR, status) {
       alert("오류발생 : " + status);
    });
 }
</script >
<script >
/* 패스워드 체크*/
 function checkPwd(){
  var jpwd = document.getElementById("jpwd").value;
  var rpwd = document.getElementById("rpwd").value;
  if(jpwd!= rpwd){
   document.getElementById('pwdresult').style.color = "red";
   document.getElementById('pwdresult').innerHTML = "동일한 암호를 입력하세요."; 
  }else{
   document.getElementById('pwdresult').style.color = "blue";
   document.getElementById('pwdresult').innerHTML = "암호가 확인 되었습니다."; 
   
  }
  
 }
</script >

<script >
 
/* 우편번호 찾기 */
$("#findbtn").click(function() {
	if ($("#dong").val() != "") {
	$("#ziplist *").remove();
	var reqAjax = $.ajax({url: "zipcode.bi", type: "POST", data: {dong: $("#dong").val()}});
	reqAjax.done(function(result){
		$(result).appendTo("#ziplist");
	});
	reqAjax.fail(function (jqXHR, status){
		alert("error : " + status);
	});
	} else {
		alert("검색어를 입력하세요");
	}
});	// 검색버튼
$("#okbtn").click(function() {
	var selectOne = $("#ziplist").val().split(" ");
	$("#zip1").val(selectOne[0].split("-")[0]);
	$("#zip2").val(selectOne[0].split("-")[1]);
	var s = selectOne[1];
	for (var i=2; i<selectOne.length; ++i) {
		s = s + " " + selectOne[i];
	}
	$("#addr1").val(s);
	$("#ziplist *").remove();
});
$("#closebtn").click(function(){
	$("#ziplist *").remove();
});

$("#successbtn").click(function(){location.href='index.bi';});

/* function openPop(){
{
window.open("http://www.naver.com", "startpop", "width=800, height=500, scrollbars=no, resizable=no ,status=no ,toolbar=no");
}
} */
</script>

<script>
   function showPop(){
      var zip = document.getElementById("showmodal");
      zip.style.display = "block";
      zip.style.top = -150+"px";
      zip.style.left = 30+"px";
      $("#ziplist *").remove();
   }
   function hidePop() {
      var zip = document.getElementById("showmodal");
      var selectOne = $("#ziplist").val().split(" ");
      $("#zip1").val(selectOne[0].substring(0,3));
      $("#zip2").val(selectOne[0].substring(3));
      $("#addr").val(selectOne[1]+" "+selectOne[2]);
      zip.style.display = "none";
   }   
</script>

